<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="auto">
            <!--      <el-form-item label="ID" prop="id">-->
            <!--        <el-input-->
            <!--          v-model="queryParams.id"-->
            <!--          placeholder="请输入ID"-->
            <!--          clearable-->
            <!--          size="small"-->
            <!--          @keyup.enter.native="handleQuery"-->
            <!--        />-->
            <!--      </el-form-item>-->
            <el-form-item label="词名称" prop="wordName">
                <el-input
                    v-model="queryParams.wordName"
                    placeholder="请输入词名称"
                    clearable
                    size="small"
                    @keyup.enter.native="handleQuery"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="el-icon-plus"
                    size="mini"
                    @click="handleAdd"
                    v-hasPermi="['system:sensitiveWord:add']"
                >新增
                </el-button>
            </el-col>
<!--            <el-col :span="1.5">-->
<!--                <el-button-->
<!--                    type="success"-->
<!--                    plain-->
<!--                    icon="el-icon-edit"-->
<!--                    size="mini"-->
<!--                    :disabled="single"-->
<!--                    @click="handleUpdate"-->
<!--                    v-hasPermi="['system:sensitiveWord:edit']"-->
<!--                >修改-->
<!--                </el-button>-->
<!--            </el-col>-->
<!--            <el-col :span="1.5">-->
<!--                <el-button-->
<!--                    type="danger"-->
<!--                    plain-->
<!--                    icon="el-icon-delete"-->
<!--                    size="mini"-->
<!--                    :disabled="multiple"-->
<!--                    @click="handleDelete"-->
<!--                    v-hasPermi="['system:sensitiveWord:remove']"-->
<!--                >删除-->
<!--                </el-button>-->
<!--            </el-col>-->
<!--            <el-col :span="1.5">-->
<!--                <el-button-->
<!--                    type="warning"-->
<!--                    plain-->
<!--                    icon="el-icon-download"-->
<!--                    size="mini"-->
<!--                    :loading="exportLoading"-->
<!--                    @click="handleExport"-->
<!--                    v-hasPermi="['system:sensitiveWord:export']"-->
<!--                >导出-->
<!--                </el-button>-->
<!--            </el-col>-->
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <el-card shadow="never" style="margin-top: 10px!important;">
            <el-button  style="margin: 5px!important;" v-for="item in sensitiveWordList" @click="handleUpdate(item)">{{item.wordName}}</el-button>
        </el-card>

<!--        <el-table v-loading="loading" :data="sensitiveWordList" @selection-change="handleSelectionChange">-->
<!--            <el-table-column type="selection" width="55" align="center"/>-->
<!--            <el-table-column label="序号" type="index" width="50"/>-->
<!--            <el-table-column label="词名称" align="center" prop="wordName"/>-->
<!--            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">-->
<!--                <template slot-scope="scope">-->
<!--                    <el-button-->
<!--                        size="mini"-->
<!--                        type="text"-->
<!--                        icon="el-icon-edit"-->
<!--                        @click="handleUpdate(scope.row)"-->
<!--                        v-hasPermi="['system:sensitiveWord:edit']"-->
<!--                    >修改-->
<!--                    </el-button>-->
<!--                    <el-button-->
<!--                        size="mini"-->
<!--                        type="text"-->
<!--                        icon="el-icon-delete"-->
<!--                        @click="handleDelete(scope.row)"-->
<!--                        v-hasPermi="['system:sensitiveWord:remove']"-->
<!--                    >删除-->
<!--                    </el-button>-->
<!--                </template>-->
<!--            </el-table-column>-->
<!--        </el-table>-->

<!--        <pagination-->
<!--            v-show="total>0"-->
<!--            :total="total"-->
<!--            :page.sync="queryParams.pageNum"-->
<!--            :limit.sync="queryParams.pageSize"-->
<!--            @pagination="getList"-->
<!--        />-->

        <!-- 添加或修改敏感词管理对话框 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
            <el-form ref="form" :model="form" :rules="rules" label-width="auto">
                <el-form-item label="词名称" prop="wordName">
                    <el-input v-model="form.wordName" placeholder="请输入词名称"/>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitForm" v-hasPermi="['system:sensitiveWord:edit']">确 定</el-button>
                <el-button type="danger" @click="handleDelete(form)"  v-if="checkPermi(['system:sensitiveWord:remove']) && addOrEdit=='edit'">删 除</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
    import {
        listSensitiveWord,
        getSensitiveWord,
        delSensitiveWord,
        addSensitiveWord,
        updateSensitiveWord,
        exportSensitiveWord
    } from "@/api/system/sensitiveWord";

    import { checkPermi, checkRole } from "@/utils/permission";

    export default {
        name: "SensitiveWord",
        data() {
            return {
                // 遮罩层
                loading: true,
                // 导出遮罩层
                exportLoading: false,
                // 选中数组
                ids: [],
                // 非单个禁用
                single: true,
                // 非多个禁用
                multiple: true,
                // 显示搜索条件
                showSearch: true,
                // 总条数
                total: 0,
                // 敏感词管理表格数据
                sensitiveWordList: [],
                // 弹出层标题
                title: "",
                // 是否显示弹出层
                open: false,
                // 查询参数
                queryParams: {
                    // pageNum: 1,
                    // pageSize: 10,
                    id: null,
                    wordName: null
                },
                // 表单参数
                form: {},
                // 表单校验
                rules: {},
                addOrEdit: null,
            };
        },
        created() {
            this.getList();
        },
        methods: {
            checkPermi,
            checkRole,
            /** 查询敏感词管理列表 */
            getList() {
                this.loading = true;
                listSensitiveWord(this.queryParams).then(response => {
                    this.sensitiveWordList = response.rows;
                    this.total = response.total;
                    this.loading = false;
                });
            },
            // 取消按钮
            cancel() {
                this.open = false;
                this.reset();
            },
            // 表单重置
            reset() {
                this.form = {
                    id: null,
                    wordName: null
                };
                this.resetForm("form");
            },
            /** 搜索按钮操作 */
            handleQuery() {
                this.queryParams.pageNum = 1;
                this.getList();
            },
            /** 重置按钮操作 */
            resetQuery() {
                this.resetForm("queryForm");
                this.handleQuery();
            },
            // 多选框选中数据
            handleSelectionChange(selection) {
                this.ids = selection.map(item => item.id)
                this.single = selection.length !== 1
                this.multiple = !selection.length
            },
            /** 新增按钮操作 */
            handleAdd() {
                this.reset();
                this.open = true;
                this.addOrEdit = 'add';
                this.title = "添加敏感词管理";
            },
            /** 修改按钮操作 */
            handleUpdate(row) {
                this.reset();
                const id = row.id || this.ids
                getSensitiveWord(id).then(response => {
                    this.form = response.data;
                    this.open = true;
                    this.addOrEdit = 'edit';
                    this.title = "修改/查看敏感词管理";
                });
            },
            /** 提交按钮 */
            submitForm() {
                this.$refs["form"].validate(valid => {
                    if (valid) {
                        if (this.form.id != null) {
                            updateSensitiveWord(this.form).then(response => {
                                this.$modal.msgSuccess("修改成功");
                                this.open = false;
                                this.getList();
                            });
                        } else {
                            addSensitiveWord(this.form).then(response => {
                                this.$modal.msgSuccess("新增成功");
                                this.open = false;
                                this.getList();
                            });
                        }
                    }
                });
            },
            /** 删除按钮操作 */
            handleDelete(row) {
                const ids = row.id || this.ids;
                this.$modal.confirm('是否确认删除敏感词？').then(function () {
                    return delSensitiveWord(ids);
                }).then(() => {
                    this.getList();
                    this.open = false;
                    this.$modal.msgSuccess("删除成功");
                }).catch(() => {
                });
            },
            /** 导出按钮操作 */
            handleExport() {
                const queryParams = this.queryParams;
                this.$modal.confirm('是否确认导出所有敏感词管理数据项？').then(() => {
                    this.exportLoading = true;
                    return exportSensitiveWord(queryParams);
                }).then(response => {
                    this.$download.name(response.msg);
                    this.exportLoading = false;
                }).catch(() => {
                });
            }
        }
    };
</script>
